<template>
  <div class="panel-group">
    <div class="card-panel-col card-panel-col-left">
      <!-- <attets-panel class="card-panel" :account-info="accountInfo" /> -->
      <div class="card-panel">
        <div class="card-panel-wrapper">
          <div class="card-panel-description">
            <div class="card-panel-text">今日收入</div>
            <count-to
              :start-val="0"
              :decimals="2"
              :end-val="parseFloat(accountInfo.today_income) || 0"
              :duration="300"
              class="card-panel-num"
            />
          </div>
          <div class="card-panel-icon-wrapper">
            <img class="icon" src="@/assets/home/icon4.png" />
          </div>
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-wrapper">
          <div class="card-panel-description">
            <div class="card-panel-text">昨日收入</div>
            <count-to
              :start-val="0"
              :decimals="2"
              :end-val="+accountInfo.yesterday_income || 0"
              :duration="300"
              class="card-panel-num"
            />
          </div>
          <div class="card-panel-icon-wrapper">
            <img class="icon" src="@/assets/home/icon1.png" />
          </div>
        </div>
      </div>
      <!-- <div class="card-panel">
        <div class="card-panel-wrapper">
          <div class="card-panel-icon-wrapper">
            <img class="icon" src="@/assets/home/icon2.png">
          </div>
          <div class="card-panel-description">
            <count-to :start-val="0" :decimals="2" :end-val="+accountInfo.collected_agent_fee || 0" :duration="3200" class="card-panel-num" />
            <div class="card-panel-text">
              代收代理费
            </div>
          </div>
        </div>
      </div>-->
      <!-- <div class="card-panel">
        <div class="card-panel-wrapper">
          <div class="card-panel-icon-wrapper">
            <img class="icon" src="@/assets/home/icon3.png">
          </div>
          <div class="card-panel-description">
            <count-to :start-val="0" :decimals="2" :end-val="parseFloat(accountInfo.return_deposit) || 0" :duration="3600" class="card-panel-num" />
            <div class="card-panel-text">
              待返订金
            </div>
          </div>
        </div>
      </div>-->
      <!-- <div class="card-panel">
        <div class="card-panel-wrapper">
          <div class="card-panel-icon-wrapper">
            <img class="icon" src="@/assets/home/icon6.png" />
          </div>
          <div class="card-panel-description">
            <count-to
              :start-val="0"
              :decimals="2"
              :end-val="parseFloat(accountInfo.has_sale) || 0"
              :duration="3200"
              class="card-panel-num"
            />
            <div class="card-panel-text">已促成交易</div>
          </div>
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-wrapper">
          <div class="card-panel-icon-wrapper">
            <img class="icon" src="@/assets/home/icon7.png" />
          </div>
          <div class="card-panel-description">
            <count-to
              :start-val="0"
              :decimals="2"
              :end-val="parseFloat(accountInfo.has_agent_fee) || 0"
              :duration="3600"
              class="card-panel-num"
            />
            <div class="card-panel-text">累积收取代理费</div>
          </div>
        </div>
      </div>-->
    </div>
    <div class="card-panel-col card-panel-col-right">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper">
          <img class="icon" src="@/assets/home/icon5.png" />
        </div>
        <div class="card-panel-text">本月收入</div>
        <div class="card-panel-description">
          <count-to
            :start-val="0"
            :decimals="2"
            :end-val="parseFloat(accountInfo.month_income) || 0"
            :duration="300"
            class="card-panel-num"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
// import AttetsPanel from "./assetsPanel";

export default {
  props: {
    accountInfo: {
      type: Object
    }
  },
  created() {
    setTimeout(() => {}, 2000);
  },
  components: {
    CountTo
    // AttetsPanel
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.panel-group {
  display: flex;
  margin-left: 20px;
  justify-content: space-between;
  .card-panel-col {
    position: relative;
    .card-panel {
      position: relative;
    }
    &.card-panel-col-left {
      width: 53.6%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .card-panel {
        height: 47%;
        background: -moz-linear-gradient(left, #fd7d16 0%, #f9c752 100%);
        background: -webkit-gradient(
          linear,
          left,
          right,
          color-stop(0%, #fd7d16),
          color-stop(100%, #f9c752)
        );
        background: -webkit-linear-gradient(left, #fd7d16 0%, #f9c752 100%);
        background: -o-linear-gradient(left, #fd7d16 0%, #f9c752 100%);
        background: -ms-linear-gradient(left, #fd7d16 0%, #f9c752 100%);
        background: linear-gradient(to right, #fd7d16 0%, #f9c752 100%);
        &:nth-of-type(1) {
          background: -moz-linear-gradient(left, #44c7e7 0%, #f9c752 100%);
          background: -webkit-gradient(
            linear,
            left,
            right,
            color-stop(0%, #44c7e7),
            color-stop(100%, #72dfb7)
          );
          background: -webkit-linear-gradient(left, #44c7e7 0%, #72dfb7 100%);
          background: -o-linear-gradient(left, #44c7e7 0%, #72dfb7 100%);
          background: -ms-linear-gradient(left, #44c7e7 0%, #72dfb7 100%);
          background: linear-gradient(to right, #44c7e7 0%, #72dfb7 100%);
        }
        .card-panel-wrapper {
          height: 100%;
          display: flex;
          font-size: 16px;
          justify-content: space-around;
          color: #fff;
          .card-panel-description {
            margin: auto 0;
            line-height: 45px;
            .card-panel-num {
              font-size: 24px;
              font-weight: bold;
            }
          }
        }
        .card-panel-icon-wrapper {
          width: 75px;
          height: 62px;
          margin: auto 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    &.card-panel-col-right {
      width: 44%;
      .card-panel {
        height: 100%;
        font-size: 16px;
        color: #fff;
        text-align: center;
        background: url(../../../assets/home/yueBg.jpg) no-repeat;
        background-size: cover;
        .card-panel-icon-wrapper {
          img {
            width: 95px;
            height: 80px;
            margin: 27px 0 20px 0;
          }
        }
        .card-panel-num {
          font-size: 24px;
          font-weight: bold;
          line-height: 90px;
        }
      }
    }
  }
}
</style>
